<template>
  <!-- 添加或修改部门数据权限对话框 -->
  <el-dialog :title="title" v-model="open" width="740px" append-to-body>
    <el-form ref="dataRoleRef" :model="form" :rules="rules" label-width="100px" class="m-form-inline" inline>
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入角色名称"/>
      </el-form-item>
      <el-form-item label="显示顺序" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入显示顺序"/>
      </el-form-item>
      <el-form-item label="数据权限" style="width: 600px;">
        <!--          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>-->
        <!--          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>-->
        <!--          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>-->
        <el-tree
            v-if="open"
            class="tree-border"
            :data="menuOptions"
            show-checkbox
            auto-expand-parent
            ref="menuRef"
            node-key="id"
            :check-strictly="false"
            empty-text="加载中，请稍候"
            :props="{ label: 'name', children: 'children' }"
        ></el-tree>
      </el-form-item>
      <el-form-item label="备注" prop="remark" style="width: 600px;">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import {getDataRole, addDataRole, updateDataRole} from "@/api/wvp/dataRole";
import {getComminutyData} from "@/api/wvp/addressUnit";

const {proxy} = getCurrentInstance();
const emit = defineEmits(['close'])
const form = ref({})
const open = ref(false);
const title = ref("");
const menuRef = ref()
const menuOptions = ref([]);

/** 查询菜单树结构 */
function getMenuTreeselect() {
  getComminutyData().then(response => {
    menuOptions.value = proxy.handleTree(response.rows, "id");
  });
}

getMenuTreeselect()
const rules = ref({
  name: [
    {required: true, message: "角色名称不能为空", trigger: "blur"}
  ],
  sort: [
    {required: true, message: "显示顺序不能为空", trigger: "blur"}
  ],
  status: [
    {required: true, message: "角色状态不能为空", trigger: "change"}
  ],
});

// 表单重置
function reset() {
  form.value = {
    id: null,
    name: null,
    sort: null,
    dataScope: null,
    menuCheckStrictly: null,
    deptCheckStrictly: null,
    status: null,
    deleted: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null
  };
  proxy.resetForm("dataRoleRef");
}

function cancel() {
  open.value = false;
  reset();
}


/** 提交按钮 */
function submitForm() {
  proxy.$refs["dataRoleRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        form.value.addressUnitIds = menuRef.value.getCheckedKeys();
        updateDataRole(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          emit("close", false)
        });
      } else {
        form.value.addressUnitIds = menuRef.value.getCheckedKeys();
        addDataRole(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          emit("close", false)
        });
      }
    }
  });
}


function begin(id) {
  if (!id) {
    reset();
    open.value = true
    title.value = "添加部门数据权限";
    return;
  }
  getDataRole(id).then(response => {
    form.value = response.data;
    title.value = "修改部门数据权限";
    open.value = true;
    nextTick(() => {
      let checkedKeys = form.value.addressUnitIds;
      checkedKeys.forEach((v) => {
        menuRef.value.setChecked(v, true, false);
      });
    });


  });
}

defineExpose({
  begin
})
</script>
<style scoped>
.m-form-inline .el-input {
  width: 220px;
}

.m-form-inline .el-select {
  width: 220px;
}

.m-form-inline .el-date-picker {
  width: 220px;
}
</style>
